<template>
    <view class="content">
        <van-popup
            position="bottom"
            @click-overlay="closePopup"
            :show="show"
            round
            z-index="104"
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content" :style="'height:' + (popupHeight) + 'px'">

                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> 该订单拆成{{ num }}个包裹</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>
                    <scroll-view class="scroll-content " scroll-y :lower-threshold="120" show-scrollbar="false">

                        <view class="packageList">
                            <view class="packageWrapper clearfix" v-for="(item,index) in packageList" :key="index" :id="item.Id">
                                <view class="wraper_left">
                                    <view class="goodsPic">
                                        <img class="img" :src="item.imgurl" mode="widthFix" />
                                    </view>
                                    <view class="packageText">
                                        <view class="packageStatus">{{ item.status }}</view>
                                        <view class="packageCode" @click.stop="showSpecs()">{{ item.kuaidiCode }} </view>
                                        <view class="wraper_bottom">{{ item.text }}</view>
                                    </view>
                                </view>
                                <view class="wraper_right" @click="toLogisticsDetail">
                                    <van-icon name="arrow"/>
                                </view>

                            </view>

                        </view>
                    </scroll-view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>

export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        roleName: {
            type: String,
            default: () => ''
        },
        num: {
            type: Number,
            default: () => 0
        }
    },
    data () {
        return {
            curS: 0,
            curSName: '',
            curR: 0, // 价格区间·
            date: '',
            title: '商品排序',
            option: {},
            url: '',
            packageList: [
                {
                    Id: 11,
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    status: '已签收',
                    kuaidiCode: 'LJLJ999111444222',
                    text: '正常签收  签收类型：本人'
                },
                {
                    Id: 12,
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    status: '已签收',
                    kuaidiCode: 'LJLJ999111444222',
                    text: '正常签收  签收类型：本人'
                },
                {
                    Id: 13,
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    status: '已签收',
                    kuaidiCode: 'LJLJ999111444222',
                    text: '正常签收  签收类型：本人'
                }

            ],
            popupHeight: '300'
        }
    },

    computed: {
    },

    watch: {

    },
    onLoad () {

    },
    onReady () {
    },

    methods: {

        // 关闭弹窗
        closePopup () {
            this.$emit('closePopup')
        },

        // 确定排序
        paixuClick () {
            this.$emit('closePopup')
        },

        toLogisticsDetail () {
            const params = {}
            uni.navigateTo({
                url: '/pages/orders/logisticsDetail?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
        }

    }

}
</script>
<style lang="scss" scoped>

::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}

// 最外层
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // height: 100vh;
    // height: calc(100vh - 50px);
    overflow-y: auto;
    z-index: -2;
    // background-size: 100%;
    scrollbar-width: none;
    /* 针对Firefox */
}
// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
    // height: 100vh;
    // overflow: hidden;
}

// 提示框
.popup-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;
    // height:100vh;
    height: 100%;

    .popup-main {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
    }

    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
        padding-bottom: 24px;
    }
    .packageList{
        // margin-top: 24px;
        width:100%;
        background-color: #ffffff;
        padding-bottom: 24px;
    }

.packageWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}
.packageWrapper:last-child{
  margin-bottom: 0px;
}

.wraper_left {
  display: flex;
  // float: left;
  width: 90%;

  .goodsPic {
    width: 27%;

    img {
      width: 100%;
      height: auto;
    }
  }

  .packageText {
    position: relative;
    width: 73%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    // padding-top: 5px;
    // padding-bottom: 6px;
    text-align: left;

    background-color: palegoldenrod;

    .packageStatus {
      position: absolute;
      top: 2%;
      font-size: 14px;
      text-align: left;
      color: #111111;
      line-height: 14px;
      // margin-top: 9px;  //display：flex   中 元素居中
      width: 100%;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */

    }

    .packageCode {
      position: absolute;
      top: 30%;
      // margin-top: 7px;
      font-size: 11px;
      text-align: left;
      color: #888888;
      line-height: 11px;
      display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .wraper_bottom {
      position: absolute;
      top: 60%;
      display: flex;
      align-items: center;
      font-size: 11px;
      color: #888888;
      width: 100%;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */

    }
  }
}

.wraper_right {
  font-size: 11px;
  color: #666666;
  width: 10%;
  text-align: right;
}
    // 加入购物车按钮
    .goodsAction {
        margin-top: 22px;
        width: calc(100% - 48px);
        text-align: center;
        // background-color: aquamarine;
        height: 70px;
    }

    .button {
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        height: 44px;
        line-height: 44px;
        border-radius: 25px;
        border-style: initial !important;
        padding: 0 !important;
        background: #FF6203 !important;
    }
}

::v-deep .van-cell {
    border: 1px solid #888888 !important;
}

::v-deep .van-cell--hover .hover-class {
    border: 1px solid #888888;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>
